<template>
  <div class="dashboard-container">
    <!-- 学科管理 -->
    <el-card>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>学科</el-breadcrumb-item>
      </el-breadcrumb>
      <el-row>
        <el-button type="primary">新增学科</el-button>
      </el-row>
      <!-- 搜索框 -->
      <el-row>
        <span>学科名称:</span>
        <el-input placeholder="请输入内容" v-model="queryInfo.query" class="search">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-row>
      <!-- 学科列表 -->
      <el-table :data="subjectList" border style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="subjectName" label="学科名称"></el-table-column>
        <el-table-column prop="username" label="创建者"></el-table-column>
        <el-table-column prop="addDate" label="创建日期"></el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示">
          <template v-slot="scope">{{scope.row.isFrontDisplay?"是":"否"}}</template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录"></el-table-column>
        <el-table-column prop="tags" label="标签"></el-table-column>
        <el-table-column prop="totals" label="题目数量"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <!-- 操作按钮 -->
            <el-tooltip class="item" effect="dark" content="二级目录" placement="bottom">
              <el-button type="warning" icon="el-icon-star-off" circle size="mini"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="学科标签" placement="bottom">
              <el-button type="success" icon="el-icon-check" circle size="mini"></el-button>
            </el-tooltip>
            <el-button type="primary" icon="el-icon-edit" circle size="mini"></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="removeSubject(scope.row)"
              size="mini"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import { list as subjects } from '@/api/hmmm/subjects.js'
export default {
  name: 'SubjectsList',
  data() {
    return {
      subjectList: [],
      queryInfo: {
        query: '',
        page: 1,
        pagesize: 5
      },
      total: null
    }
  },
  methods: {
    async getSubjectsList() {
      const params = this.queryInfo
      const { data: res } = await subjects(params)
      this.subjectList = res.items
      this.total = res.counts
      console.log(res)
    },
    removeSubject(row) {},
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getSubjectsList()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage
      this.getSubjectsList()
    }
  },
  created() {
    this.getSubjectsList()
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 10px;
}
.search {
  width: 200px;
}
.el-row {
  margin: 15px 0;
}
.el-table {
  margin: 15px 0;
}
</style>
